<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
 <div ref="root" style="height:95%;"></div>
</template>
<script>
import {Column} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default{
  setup(){
    //获取dom元素
    const root = ref(null)
    let stackedColumnPlot = null
    let initChart = ()=>{
      stackedColumnPlot = new Column(root.value, {
      data: [
          { month: '4月', value: 4602,type:'房地产服务中心'},
          { month: '5月', value: 5965,type:'房地产服务中心'},
          { month: '6月', value: 7587 ,type:'房地产服务中心'},
          { month: '7月', value: 5232,type:'房地产服务中心'},
          { month: '8月', value: 5507 ,type:'房地产服务中心'},
          { month: '9月', value: 5132 ,type:'房地产服务中心'},
          { month: '10月', value: 3977 ,type:'房地产服务中心'},
          { month: '11月', value: 5437,type:'房地产服务中心'},
          { month: '12月', value: 5111,type:'房地产服务中心' },
          { month: '1月', value: 4786,type:'房地产服务中心'},
          { month: '2月', value: 3462,type:'房地产服务中心' },
          { month: '3月', value: 6292,type:'房地产服务中心' },

          { month: '4月', value: 4613,type:'区政务中心'},
          { month: '5月', value: 3810,type:'区政务中心' },
          { month: '6月', value: 4748,type:'区政务中心'  },
          { month: '7月', value: 6063 ,type:'区政务中心'},
          { month: '8月', value: 4000,type:'区政务中心'},
          { month: '9月', value: 4874,type:'区政务中心'},
          { month: '10月', value: 4084,type:'区政务中心' },
          { month: '11月', value: 9075 ,type:'区政务中心'},
          { month: '12月', value: 8620,type:'区政务中心'},
          { month: '1月', value: 8165,type:'区政务中心'},
          { month: '2月', value: 4139 ,type:'区政务中心'},
          { month: '3月', value: 7683,type:'区政务中心'},

          { month: '4月', value: 27608 ,type:'市政务大厅'},
          { month: '5月', value: 24463,type:'市政务大厅' },
          { month: '6月', value: 27200 ,type:'市政务大厅'},
          { month: '7月', value: 33348 ,type:'市政务大厅'},
          { month: '8月', value: 27813 ,type:'市政务大厅'},
          { month: '9月', value: 32712 ,type:'市政务大厅'},
          { month: '10月', value: 24146,type:'市政务大厅'},
          { month: '11月', value: 27901,type:'市政务大厅' },
          { month: '12月', value: 30863,type:'市政务大厅' },
          { month: '1月', value: 33825 ,type:'市政务大厅'},
          { month: '2月', value: 22454,type:'市政务大厅'},
          { month: '3月', value: 30799,type:'市政务大厅'},

          { month: '4月', value: 79903 ,type:'部门单独办事大厅' },
          { month: '5月', value: 85587,type:'部门单独办事大厅'},
          { month: '6月', value: 79261,type:'部门单独办事大厅'},
          { month: '7月', value: 77916,type:'部门单独办事大厅' },
          { month: '8月', value: 81099,type:'部门单独办事大厅' },
          { month: '9月', value: 87299 ,type:'部门单独办事大厅'},
          { month: '10月', value: 94174,type:'部门单独办事大厅'},
          { month: '11月', value: 115221 ,type:'部门单独办事大厅'},
          { month: '12月', value: 122004,type:'部门单独办事大厅' },
          { month: '1月', value: 128786,type:'部门单独办事大厅'},
          { month: '2月', value: 79146,type:'部门单独办事大厅' },
          { month: '3月', value: 86334,type:'部门单独办事大厅' },
        ],
      isStack: true,
      xField: 'month',
      yField: 'value',
      colorField: 'type', // 部分图表使用 seriesField
      color: ['#f5e57c', '#c78ae7', '#5ed1f2','#6dd497'],
      seriesField: 'type',
      // label: {
      //   // 可手动配置 label 数据标签位置
      //   position: 'middle', // 'top', 'bottom', 'middle'
      //   // 可配置附加的布局方法
      //   layout: [
      //     // 柱形图数据标签位置自动调整
      //     { type: 'interval-adjust-position' },
      //     // 数据标签防遮挡
      //     { type: 'interval-hide-overlap' },
      //     // 数据标签文颜色自动调整
      //     { type: 'adjust-color' },
      //   ],
      // },
    });

    stackedColumnPlot.render();
  };
    
    onMounted(initChart)
    return{
      root
    }
  }
}
</script>